<template>
    <div class="ranking-root">
        <div v-if="books">
            <div class="read-ranking">
                <h1 class="flag flag-title">
                    <div>阅读排行榜</div>
                    <div class="flag-right">more <img src="/img/arrow.png" alt=""></div>
                </h1>
                <div class="recommend">
                    <BookListFirst class="pos-re" :books="books[1]"></BookListFirst>
                    <BookListFirst :books="books[0]" imgWidth="28vw" img-height="39.5vw"></BookListFirst>
                    <BookListFirst class="pos-re" :books="books[2]"></BookListFirst>
                </div>
            </div>
            <div class="groom">
                <h1 class="flag flag-title">
                    <div>热门推荐</div>
                    <div class="flag-right">more <img src="/img/arrow.png" alt=""></div>
                </h1>
                <div class="recommend">
                    <BookListFirst v-for="s,i in books" :books="s"></BookListFirst>
                </div>
            </div>
            <div class="borrow-ranking">
                <h1 class="flag flag-title">
                    <div>借阅排行榜</div>
                    <div class="flag-right">more <img src="/img/arrow.png" alt=""></div>
                </h1>
                <div class="cream-box">
                    <BookListSecond class="cream" v-for="s in books" :books="s">
                        <template slot="line1">
                            <p class="line1">{{s.author}}</p>
                        </template>
                        <template slot="line2">
                            <p class="line2"><span>{{s.reading}}</span> 次借阅<span>{{s.collect}}</span> 人喜欢</p>
                        </template>
                    </BookListSecond>
                </div>
            </div>
            <div class="present-ranking">
                <h1 class="flag flag-title">
                    <div>捐书排行榜</div>
                    <div class="flag-right">more <img src="/img/arrow.png" alt=""></div>
                </h1>
                <div class="cream-box">
                    <BookListSecond class="cream" v-for="s in books" :books="s">
                        <template slot="line1">
                            <p class="description">{{s.intro | strFunction}}</p>
                        </template>
                    </BookListSecond>
                </div>
            </div>
            <div class="like">
                <h1 class="flag flag-title">
                    <div>猜你喜欢</div>
                    <div class="flag-right">换一换</div>
                </h1>
                <div class="recommend">
                    <BookListFirst v-for="s,i in books" :books="s"></BookListFirst>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    import BookListFirst from "../components/BookListFirst.vue";
    import BookListSecond from "../components/BookListSecond.vue";
    export default {
        name: "Ranking",
        computed:{
        ...mapState(["books"])
        },
        components:{
            BookListFirst,
            BookListSecond
        },
        mounted(){
            this.$store.dispatch("getBooks")
        }
    }
</script>

<style scoped lang="less">
    .ranking-root{

    }
    .read-ranking{
        padding: 0 3.9vw;
        margin-top: 5.5vw;
    }
    .groom,.borrow-ranking,.present-ranking,.like{
        padding: 0 3.9vw;
        margin-top: 9.3vw;
    }
    .title{
        display: flex;
        justify-content: space-between;
    }
    .recommend{
        width: 87.2vw;
        margin: 0 auto;
        margin-top: 5.3vw;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .flag-right img{
        position: relative;
        top: 0.8vw;
        height: 3.5vw;
        opacity: 0.7;
    }
     h1{
        font-size: @title;
    }
    h1 span{
        position: relative;
        bottom: 0.8vw;
    }
    h1 div{
        margin-left: 1.6vw;
        display: inline-block;
    }
    .pos-re{
        position: relative;
        bottom: 1.7vw;
    }
    .flag-title{
        display: flex;
        justify-content: space-between !important;
        width: 100%;
        padding-right: 3vw;
        .flag-right{
            color: #b1b1b1;
            font-size: 3.5vw;
            font-weight: normal;
        }
    }
    .cream{
        margin: 4.4vw 0;
    }
    .cream-box{
        margin-top: 0.9vw;
    }
</style>